<template>
  <div class="note-cart" v-if="show">
    <div class="cart-wrapper">
      <div class="header">
        <div class="title">
          {{ note.title }}
        </div>
        <div class="createtime">
          发布于 {{ daydiff(new Date(note.createTime)) }}
        </div>
      </div>
      <div class="main">
        <div class="main_content">
          {{ note.content }}
        </div>
        <div class="main_propImg" v-if="note.imgList[0]">
          <van-image :src="note.imgList[0]" radius="8px" fit="fill">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" /> </template
          ></van-image>
        </div>
      </div>

      <div class="buttom">
        <div class="icon">
          <div class="iconItem">
            <van-icon name="good-job-o" />
            <span>&nbsp;&nbsp;{{ note.like.length }}</span>
          </div>
          <div class="iconItem">
            <van-icon name="chat-o" />
            <span>&nbsp;&nbsp;{{ note.comments.length }}</span>
          </div>
        </div>
        <van-icon name="cross" @click.stop="onDelete" />
        <!-- <van-popover
          placement="left-end"
          v-model:show="showPopover"
          theme="dark"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <van-icon
              v-if="ellipsisable"
              name="ellipsis"
              @click.stop="showPopover = !showPopover"
              size="18"
            />
          </template>
        </van-popover> -->
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity';
import { onBeforeMount } from '@vue/runtime-core';
import { deleteNoteById } from '@/api/interface';
import { daydiff } from '../../../utils/daydiff';
import { Dialog } from 'vant';

export default {
  props: ['note', 'ellipsisable'],
  setup(props, context) {
    const state = reactive({
      showPopover: false,
      show: true,
    });
    onBeforeMount(() => {});
    const actions = [
      {
        text: '删除',
        func: async () => {},
      },
    ];
    const onSelect = async (e) => {
      await e.func();
    };
    const onDelete = async (e) => {
      Dialog.confirm({
        // title: '标题',
        message: '此操作会删除作品，确定继续嘛?',
      })
        .then(async () => {
          console.log('confim');
          debugger;
          await deleteNoteById({ id: props.note._id })
            .then(() => {})
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          console.log('cancel');
        });
    };
    return { ...toRefs(state), onSelect, actions, daydiff, onDelete };
  },
};
</script>
<style lang="less" scoped>
.note-cart {
  box-sizing: border-box;
  padding: 10px 10px;
  background: rgb(253, 253, 253);
  border-radius: 10px;
  margin: 15px 10px;
  border-radius: 10px;
  box-shadow: -1px 2px 5px #d9dadc;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-weight: 600;
    font-size: 16px;
    padding: 8px 0;
    overflow: hidden; /* 超出部分隐藏 */
    white-space: nowrap; /* 文本不换行 */
    text-overflow: ellipsis;
  }
  .createtime {
    color: rgb(124, 121, 121);
    font-weight: 600;
    font-size: 10px;
    min-width: 80px;
    text-align: right;
  }
}
.main {
  display: flex;
  justify-content: space-between;
  &_content {
    flex: 1;
    height: 80px;
    padding: 0 5px;
    font-size: 14px;
    line-height: 20px;
    -webkit-line-clamp: 4;
    font-family: '微软雅黑';
    width: 100%;
    line-clamp: 4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
    text-indent: 0.8cm;
    letter-spacing: 1px;
    word-break: break-all;
    color: rgb(126, 123, 123);
  }

  &_propImg {
    margin-left: 10px;
    ::v-deep(.van-image) {
      height: 80px;
      width: 120px;
    }
  }
}
.buttom {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .icon {
    display: flex;
    padding: 2px 0 3px 5px;
    &Item {
      margin-right: 9px;
      font-size: 14px;
    }
  }
}
.imgBox {
  box-sizing: border-box;
  display: flex;
  margin: 5px 0;
}
</style>
